{% extends "base.html" %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- 路由表信息卡片 -->
    <div class="card mb-4 route-table"> <!-- 添加 route-table 类 -->
        <div class="card-header bg-light">
            <h5 class="mb-0">设备 {{ device_name }} 路由表</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>接口</th>
                            <th>网络地址</th>
                            <th class="mask-column">子网掩码</th> <!-- 添加列类 -->
                            <th>下一跳</th>
                            <th>VLAN ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in routing_table %}
                        <tr>
                            <td>
                                {{ entry.interface }}
                            </td>
                            <td>
                                {{ entry.network }}/{{ entry.mask }}
                            </td>
                            <td>
                                {% if entry.mask == 32 %}
                                <span class="route-type host-route">主机路由</span>
                                {% elif entry.mask == 8 %}
                                <span class="route-type loopback-route">回环接口</span>
                                {% elif entry.vlan_id %}
                                <span class="route-type vlan-route">VLAN {{ entry.vlan_id }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {{ entry.nexthop }}
                            </td>
                            <td>
                                {{ entry.vlan_id | default('N/A', true) }} <!-- 优化空值显示 -->
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript 部分 -->
{% block scripts %}

<style>
    /* 自定义样式 */
    .table-responsive {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .table th {
        white-space: nowrap;
    }

    .progress {
        min-width: 100px;
    }

    #statusChart {
        min-height: 300px;
    }
</style>
{% endblock %}
{% endblock %}


<!-- <style>
    /* 路由表表格样式 */
    .route-table .table th {
        background-color: #f8f9fa;
        font-weight: 500;
        border-bottom: 2px solid #e9ecef;
    }

    .route-table .table td,
    .route-table .table th {
        vertical-align: middle;
        padding: 0.8rem;
    }

    .route-table .table tr:hover {
        background-color: #f9fafb;
    }

    /* 路由类型标识 */
    .route-table .route-type {
        font-size: 0.875rem;
        font-weight: 400;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .route-table .host-route {
        background-color: #ffe9eb;
        color: #dc3545;
    }

    .route-table .loopback-route {
        background-color: #e3f2fd;
        color: #007bff;
    }

    .route-table .vlan-route {
        background-color: #e9f5d9;
        color: #28a745;
    }

    /* 子网掩码列优化 */
    .route-table .mask-column {
        white-space: nowrap;
        min-width: 120px;
    }

    /* 响应式优化 */
    @media (max-width: 768px) {
        .route-table .table-responsive {
            overflow-x: auto;
        }
    }
</style> -->